<template>
  <!-- 会员消费统计 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :model="dataForm" label-width="100px">
      <el-descriptions :column="1" border title="消费统计">
        <el-descriptions-item>
          <template slot="label">
            总消费(今日)
          </template>
          {{ dataForm.totalSpendingToday }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            总消费(本月)
          </template>
          {{ dataForm.totalSpendingThisMonth }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            总消费(本年)
          </template>
          {{ dataForm.totalSpendingThisYear }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            总消费(升级后)
          </template>
          {{ dataForm.totalUpgradeSpending }}
        </el-descriptions-item>

      </el-descriptions>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 消费统计
 */
export default {
  name: 'ConsumeData',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      title: '查询会员',
      dataForm: {}
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        const { card_id, member_name } = this.data
        this.title = '查询会员:查询【' + member_name + '】'
        this.handleConsumeData(card_id)
      }
    }
  },
  methods: {
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    handleConsumeData(card_id) {
      const self = this
      // 获取用户信息
      self.api.fetchByInfo(card_id).then(res => {
        self.dataForm = res.data
      })
    }
  }
}
</script>
